<template>
	<view class="school">
		<top-header :value="5"></top-header>
		<view class="navList">
			<view class="item"  :class="index === 0 ? 'item_active' : ''" v-for="(item, index) in navList" :key="index" @click.stop="chooseAll(item,index)">{{ item.name }} </view>
		</view>
		<view class="list">
			<view v-for="(item,index) of schoolList" :key="index" :id="item.id" class="item" @click="toSchoolDetail(item,index)">
				<view class="left"><image :src="item.coverUrl" mode=""></image></view>
				<view class="right">
					<view class="title">{{item.title}}</view>
					<view class="remark">
						<view class="type">{{item.name}}</view>
						<view class="date">{{item.createTime.split(' ')[0]}}</view>
					</view>
				</view>
			</view>
		</view>
		<u-back-top :scroll-top="scrollTop" :top="100">
			<view id="btmTopBtn">
				<i class="ico"></i>
				顶部
			</view>
		</u-back-top>
		<tabbar :value="3"></tabbar>
	</view>
</template>

<script>
export default {
	data() {
		return {
			scrollTop: 0,
			schoolList:[],
			currentNum:0,
			navList: [
				{
					id: 1,
					name: '最新'
				},
				{
					id: 2,
					name: '爱情宝典'
				},
				{
					id: 3,
					name: '恋爱宝典'
				},
				{
					id: 4,
					name: '新手上路'
				},
				{
					id: 5,
					name: '婚姻法规'
				}
			],
			lastNum:0,
			schoolList1:[],
			
		};
	},
	onLoad() {
		this.getSchool()
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	methods:{
		async getSchool(){
			let res = await this.request({
				url:'/contents',
				method:'GET'
			})
			// console.log(res.data);
			this.schoolList = res.data;
			this.schoolList1 = res.data;
		},
		toSchoolDetail(item,index){
			this.$store.state.studyInfo = {...item};
			uni.navigateTo({
				url:'/pages/schoolDetail/schoolDetail'
			})
		},
		doData(str){
			str = str.trim();
			let arr = [];
			if(str == '最新'){
				this.schoolList = [...this.schoolList1];
				return;
			}
			this.schoolList1.forEach((e,index)=>{
				if(e.name == str){
					arr.push(e);
				}
				console.log(e.name,str);
			});
			this.schoolList = [...arr];
			console.log(this.schoolList);
			
		},
		chooseAll(items,index){
			let list = document.querySelectorAll('.navList .item');
			console.log(list);
			list[this.lastNum].classList.remove('item_active');
			list[index].classList.add('item_active');
			console.log(list[index].innerHTML)
			this.doData(list[index].innerHTML);
			this.lastNum = index;
		}
	}
};
</script>

<style lang="scss" scoped>
#btmTopBtn {
	color: #ff589b;
	width: 88rpx;
	height: 82rpx;
	border-radius: 50%;
	font-size: 24rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column;
	background-color: #fff;
	.ico {
		font-size: 42rpx;
	}
}
.school {
	padding: 120rpx 0 124rpx;
	.navList {
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		align-items: center;
		width: 100%;
		display: flex;
		overflow-x: auto;
		.item {
			padding: 10rpx 24rpx;
			box-sizing: border-box;
			white-space: nowrap;
		}
		.item_active {
			box-shadow: 0 0.3rem 0.5rem 0 rgba(255, 88, 155, 0.2);
			background: -webkit-linear-gradient(170deg, rgba(255, 88, 155, 0.6) 0%, #ff589b 100%);
			background-color: #fff;
			color: #fff;
			border-radius: 30rpx;
			font-size: 32rpx;
		}
	}
	.list {
		margin-top: 40rpx;
		padding: 30rpx;
		box-sizing: border-box;
		width: 100%;
		border-radius: 20rpx;
		background-color: #fff;
		.item {
			width: 100%;
			display: flex;
			margin: 40rpx 0;
			image {
				width: 220rpx;
				height: 140rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}
			.right {
				display: flex;
				flex-flow: column;
				justify-content: space-between;
				.remark {
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					color: #999;
					.date {
						margin-top: 7rpx;
						margin-left: 220rpx;
					}
				}
			}
		}
	}
}
</style>
